<template>
  <div>
    <div class="main">
      <div class="main_item">
        <titleVue :title="'基本信息'"></titleVue>
        <el-descriptions
          class="descriptionsInfo"
          :column="3"
          :labelStyle="{
            color: '#939393',
            fontSize: '12px',
            fontWeight: 'bold',
            marginRight: '20px',
          }"
          :contentStyle="{
            color: '#262626',
            fontSize: '12px',
          }"
        >
          <el-descriptions-item label="关联运单">{{
            data.waybillNo
          }}</el-descriptions-item>
          <el-descriptions-item label="关联订单">{{
            data.orderNo
          }}</el-descriptions-item>
          <el-descriptions-item label="项目名称">{{
            data.projectName
          }}</el-descriptions-item>
          <el-descriptions-item label="业务类型">{{
            data.orderTypeStr
          }}</el-descriptions-item>
          <el-descriptions-item label="计价方式">{{
            data.pricingMethodStr
          }}</el-descriptions-item>
          <el-descriptions-item label="计量单位">{{
            data.measureUnitStr
          }}</el-descriptions-item>
          <el-descriptions-item label="运量">{{
            data.cargoWeight
          }}</el-descriptions-item>
          <el-descriptions-item label="司机姓名">{{
            data.driverName
          }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{
            data.phoneNumber
          }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="main_item" v-if="data.waybillAuditInfoVo != undefined">
        <titleVue :title="'运单审核信息'"></titleVue>
        <el-descriptions
          class="descriptionsInfo"
          :column="3"
          border
          :labelStyle="{
            color: '#262626',
            backgroundColor: '#DDDDDD',
            width: '120px',
            height: '40px',
            fontSize: '12px',
            fontWeight: 'bold',
            marginRight: '20px',
            padding: '10px',
          }"
          :contentStyle="{
            color: '#262626',
            fontSize: '12px',
          }"
        >
          <el-descriptions-item label="审核结果">{{
            data.waybillAuditInfoVo.waybillAuditResultStr
          }}</el-descriptions-item>
          <el-descriptions-item label="审核人">{{
            data.waybillAuditInfoVo.auditUser
          }}</el-descriptions-item>
          <el-descriptions-item label="审核时间">{{
            data.waybillAuditInfoVo.resultTime
          }}</el-descriptions-item>
          <el-descriptions-item label="司机修正运量">{{
            data.waybillAuditInfoVo.amendWeight
          }}</el-descriptions-item>
          <el-descriptions-item label="审核确定运量">{{
            data.waybillAuditInfoVo.auditConfirmWeigh
          }}</el-descriptions-item>
          <el-descriptions-item label="审核司机运费">{{
            data.waybillAuditInfoVo.amount
          }}</el-descriptions-item>
          <el-descriptions-item label="异常扣款金额">{{
            data.waybillAuditInfoVo.amountLose
          }}</el-descriptions-item>
          <el-descriptions-item label="审核上传附件">
            <div
              style="color: #1890ff; cursor: pointer"
              @click="downFile(data.waybillAuditInfoVo.auditUrls)"
            >
              {{ "附件" + suffixName }}
            </div>
          </el-descriptions-item>
          <el-descriptions-item label="审核说明">{{
            data.waybillAuditInfoVo.resultInfo
          }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="main_item" v-if="data.settlementStatus == 0">
        <titleVue :title="'核算信息'"></titleVue>
        <el-descriptions
          class="descriptionsInfo"
          :column="3"
          border
          :labelStyle="{
            color: '#262626',
            backgroundColor: '#DDDDDD',
            width: '120px',
            height: '40px',
            fontSize: '12px',
            fontWeight: 'bold',
            marginRight: '20px',
            padding: '10px',
          }"
          :contentStyle="{
            color: '#262626',
            fontSize: '12px',
          }"
        >
          <el-descriptions-item label="核算司机费用">{{
            data.billAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="核算异常扣款">{{
            data.abnormalDeduction
          }}</el-descriptions-item>
          <el-descriptions-item label="核算司机金额">{{
            data.settlementAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="核算人">{{
            data.adjustAccountsPerson
          }}</el-descriptions-item>
          <el-descriptions-item label="核算时间">{{
            data.adjustAccountsTime
          }}</el-descriptions-item>
          <el-descriptions-item label="核算说明">{{
            data.statementExplain
          }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="main_item" v-if="data.settlementStatus == 0">
        <titleVue :title="'结算费用'"></titleVue>
        <el-descriptions
          class="descriptionsInfo"
          :column="3"
          border
          :labelStyle="{
            color: '#262626',
            backgroundColor: '#DDDDDD',
            width: '120px',
            height: '40px',
            fontSize: '12px',
            fontWeight: 'bold',
            marginRight: '20px',
            padding: '10px',
          }"
          :contentStyle="{
            color: '#262626',
            fontSize: '12px',
          }"
        >
          <el-descriptions-item label="司机金额">{{
            data.billAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="平台结算金额">{{
            data.settlementAmount
          }}</el-descriptions-item>
          <el-descriptions-item label="保费">无</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="main_item">
        <titleVue :title="'定位信息'"></titleVue>
        <el-descriptions
          class="descriptionsInfo"
          :column="3"
          :labelStyle="{
            color: '#262626',
            height: '40px',
            fontSize: '12px',
            fontWeight: 'bold',
            marginRight: '20px',
            padding: '10px',
          }"
          :contentStyle="{
            color: '#262626',
            fontSize: '12px',
            lineHeight: '40px',
          }"
        >
          <el-descriptions-item label="是否定位车辆">否</el-descriptions-item>
          <el-descriptions-item label="是否定位司机">否</el-descriptions-item>
          <el-descriptions-item label="轨迹状态">无</el-descriptions-item>
          <el-descriptions-item label="车辆定位数量">0</el-descriptions-item>
          <el-descriptions-item label="司机定位数量">0</el-descriptions-item>
          <el-descriptions-item label="异常原因">无</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- 核算对话框 -->
    <el-dialog
      class="AuditDialog"
      title="核算"
      :visible.sync="dialogVisible"
      width="672px"
    >
      <el-form
        :model="AuditForm"
        :rules="AuditRules"
        ref="AuditForm"
        label-width="100px"
        class="demoForm"
      >
        <div style="height: 225px">
          <el-col :span="12">
            <el-form-item label="审核司机运费" prop="auditFreight">
              <el-input v-model="AuditForm.amount" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"
            ><el-form-item label="核算司机运费" prop="calcFreight">
              <el-input v-model="AuditForm.billAmount">
                <div
                  slot="suffix"
                  style="padding-right: 10px; padding-left: 10px"
                >
                  元
                </div>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="审核异常扣款"
              prop="auditDeduction"
              :disabled="true"
            >
              <el-input
              :placeholder="AuditForm.auditDeduction ? AuditForm.auditDeduction : 0"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核算异常扣款" prop="accountsDeduct">
              <el-input v-model="AuditForm.accountsDeduct">
                <div
                  slot="suffix"
                  style="padding-right: 10px; padding-left: 10px"
                >
                  元
                </div>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="核算司机金额" prop="amountMoney">
              <el-input v-model="AuditForm.settlementAmount">
                <div
                  slot="suffix"
                  style="padding-right: 10px; padding-left: 10px"
                >
                  元
                </div>
              </el-input>
            </el-form-item>
          </el-col>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              height: 36px;
            "
          >
            <el-form-item>
              <el-button class="Btn" @click="closeDialog()">取消</el-button>
              <el-button
                class="Btn"
                type="primary"
                @click="submitForm('AuditForm')"
                >确定</el-button
              >
            </el-form-item>
          </div>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import titleVue from "@/components/titleVue.vue";
import httpApi from "@/http";
export default {
  props: {
    data: {
      typeof: Object,
      default: {},
    },
  },
  data() {
    return {
      driverBillId: "",
      dialogVisible: false,
      detailsData: {},
      AuditForm: {
        amount: "",
        auditDeduction: "",
        driverBillId: "",
        billAmount: "",
        settlementAmount: "",
        accountsDeduct: "",
      },
      AuditRules: {
        billAmount: [{ required: true, message: "不能为空", trigger: "blur" }],
        settlementAmount: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
        accountsDeduct: [
          { required: true, message: "不能为空", trigger: "blur" },
        ],
      },
      suffixName: "",
    };
  },
  methods: {
    getDetails() {
      this.driverBillId = this.$route.params.driverBillId;
      let params = { driverBillId: this.driverBillId };
      httpApi.SettlementDocApi.getStatementAccountDetails(params).then(
        (res) => {
          this.AuditForm.amount = res.data.data.waybillAuditInfoVo.amount;
          this.AuditForm.auditDeduction =
            res.data.data.waybillAuditInfoVo.amountLose;
          this.AuditForm.driverBillId = res.data.data.driverBillId;
          this.getFileAfter(res.data.data.waybillAuditInfoVo.auditUrls);

          // console.log("详情数据", res.data.data);
        }
      );
    },

    openDialog() {
      this.dialogVisible = true;
    },
    closeDialog() {
      this.dialogVisible = false;
    },
    getFileAfter(string) {
      // console.log('字符', string)
      string.lastIndexOf(".");
      // console.log(string.lastIndexOf('.'));
      this.suffixName = string.substring(string.lastIndexOf("."));
      // console.log('后缀', this.suffixName);
    },
    downFile(url) {
      window.open(url);
    },
    submitForm(AuditForm) {
      this.$refs[AuditForm].validate((valid) => {
        if (valid) {
          let parmas = {
            settlementAmount: this.AuditForm.settlementAmount,
            billAmount: this.AuditForm.billAmount,
            abnormalDeduction: this.AuditForm.accountsDeduct,
            driverBillId: this.AuditForm.driverBillId,
          };
          httpApi.SettlementDocApi.calculateSettlement(parmas).then((res) => {
            if (res.data.code == 200) {
              this.$router.go(0);
            } else {
              return false;
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
  },
  mounted() {
    this.getDetails();
    // console.log();
  },
  components: {
    titleVue,
  },
};
</script>

<style lang="scss" scoped>
.main {
  .main_item {
    margin-bottom: 40px;
  }
}

.AuditDialog {
  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #f0f0f0;
    color: #262626;
    font-size: 14px;
    font-weight: bold;
    padding: 0 20px 0px;
    height: 50px;
    line-height: 50px;
  }

  .demoForm {
    ::v-deep .el-form-item__label {
      color: #262626;
      font-size: 12px;
      font-weight: bold;
    }

    .Btn {
      height: 36px;
      width: 80px;
      font-size: 12px;
    }
  }
}
</style>
